<!--智能推荐-->
<script setup lang="ts">
import IndexSmallTitle from "../common/IndexSmallTitle.vue";

const tableData = [
  {
    date: '1',
    name: '车辆塞门处置相关 要求培训课件',
    address: '学习',
  },
  {
    date: '2',
    name: '车辆塞门处置相关 要求培训课件',
    address: '学习',
  },
  {
    date: '3',
    name: '车辆塞门处置相关 要求培训课件',
    address: '学习',
  },
  {
    date: '4',
    name: '车辆塞门处置相关 要求培训课件',
    address: '学习',
  },
]

function showMore(name:string){
  console.log(name);
}

</script>

<template>
  <div>
    <IndexSmallTitle title="智能推荐" @ccc="showMore" showMore="查看更多>>"></IndexSmallTitle>
    <el-table :data="tableData" border style="width: 100%" class="custom-table rounded-table">
      <el-table-column prop="date" label="序号" width="60" align="center"/>
      <el-table-column prop="name" label="课件名称" width="180" align="left"/>
      <el-table-column prop="address" label="操作" align="center">
        <template v-slot="scope">
          <span class="status-text">{{ scope.row.address }}>></span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.rounded-table {
  border: 1px solid rgba(4,42,94,0.1);
  border-radius: 10px;
}
.custom-table{
margin-top: 20px;
}
.el-table{
--el-table-header-bg-color:#EEF8FE;
--el-table-header-text-color:#000000;
--el-table-border-color:#909399;
}
.status-text {
color: #3C8DF9;
}
</style>